<!-- 
  @name: 管理储值卡
  @date: 2020.3.31
 -->
<template>
	<view class="content">
		<!-- 非正常状态下 -->
		<view v-show="info.cardStatus !== 1">
			<view class="info">
				<view class="item l1 bl">
					<text class="left">储值卡号</text>
					<text>{{ info.cardNo }}</text>
				</view>
				<view class="item l1 bl">
					<text class="left">设置密码</text>
					<text>{{ info.cardPwd }}</text>
				</view>
				<view class="item l1">
					<text class="left">备注</text>
					<text>{{ info.cardDesc }}</text>
				</view>
			</view>
			<!-- <view class="info">
				<view class="item l1">
					<text class="left">当前余额</text>
					<text class="icon-mey-2">￥</text><text>{{info.cardMoney || 0}}</text>
				</view>
			</view> -->
		</view>

		<!-- 正常状态下 -->
		<view v-show="info.cardStatus === 1">
			<view class="info">
				<view class="item l1 bl">
					<text class="left">储值卡号</text>
					<text>{{ info.cardNo }}</text>
				</view>
				<view class="item bl">
					<view>设置密码</view>
					<input
						type="number"
						class="int"
						placeholder="请输入6位纯数字"
						placeholder-class="phcolor"
						v-model.trim="info.cardPwd"
					/>
				</view>
				<view class="item">
					<view>备注</view>
					<input
						class="int"
						placeholder="添加备注"
						placeholder-class="phcolor"
						v-model.trim="info.cardDesc"
					/>
				</view>
			</view>
			<!-- <view class="info">
				<view class="item l2 bl">
					<view class="left">
						<view>设置额度</view>
						<view class="tip">当前可分配余额{{dtBalance}}元</view>
					</view>
					<view>
						<view class="num">
							<text class="icon-mey">￥</text>
							<text>{{info.cardMoney}}</text>
						</view>
						<view class="btn">
							<text class="btn-1" @tap="showPopup = true">转入</text>
							<text class="btn-2" @tap="cleanMey">清零</text>
						</view>
					</view>
				</view>
				<view class="item" @tap="$navigateTo('./cardRec?cardId=' + info.cardId)">
					<view class="left">分配记录</view><view class="icon-arr"></view>
				</view>
			</view> -->
		</view>

		<!-- 存入金额弹窗 -->
		<!-- <view class="_popup center" v-if="showPopup">
			<view class="cont">
				<view class="top">
					<view class="input">
						<input type="digit" class="int" placeholder="请输入转入金额" placeholder-class="phcolor" v-model.trim="cardMoney" />
					</view>
				</view>
				<view class="btn_view_popup">
					<view class="_cancle" @tap="cardMoney = ''; showPopup = false">取消</view>
					<view class="_submit" @tap="addMey">确定</view>
				</view>
			</view>
		</view> -->

		<!-- 停用/启用 -->
		<view class="info" v-show="info.cardStatus !== 3">
			<view class="item">
				<text class="left">
					设置状态
					<text class="tip" style="margin-left: 10rpx;">停用/启用</text>
				</text>
				<switch color="#0DC887" :checked="checked" @change="changeSt" />
			</view>
		</view>

		<!-- 解除锁定 -->
		<view class="btn-view com" v-show="info.cardStatus === 3" @tap="editCode(3)">解除锁定</view>

		<!-- 保存 -->
		<view class="btn-view btm">
			<view hover-class="gray" v-show="info.cardStatus === 1" @tap="submit">保存</view>
			<!-- <view hover-class="gray" v-show="info.cardStatus === 1" @tap="editCode(4)">删除</view> -->
			<view hover-class="gray" @tap="editCode(4)">
				{{ info.cardMoney ? '清空删除' : '删除' }}
			</view>
		</view>

		<!-- 登录提示 -->
		<sign-in></sign-in>
	</view>
</template>

<script>
export default {
	data() {
		return {
			operaId: '', //运营商id
			info: {
				cardNo: '',
				cardPwd: '',
				cardDesc: '',
				cardMoney: '',
				cardStatus: 1
			}, //信息
			cardMoney: '', //转入的金额
			checked: false, //switch状态
			showPopup: false //是否存入弹窗
		};
	},
	computed: {
		dtBalance() {
			return this.$store.state.dtBalance;
		}
	},
	onLoad(e) {
		this.operaId = e.operaId;
		this.info = JSON.parse(this.$store.state.tmpData);
		this.$store.commit('setTmpData', '');
		this.checked = this.info.cardStatus === 1 ? true : false;
	},
	methods: {
		remove() {},
		//存入金额
		addMey() {
			if (!this.cardMoney) {
				this.$showToast('请输入转入金额！');
				return;
			} else {
				if (parseFloat(this.cardMoney) > this.dtBalance) {
					this.$showToast('可用余额不足！');
					return;
				}
			}
			this.changeMey(1);
		},
		//清零金额
		cleanMey() {
			uni.showModal({
				content: '确认清空本储值卡额度吗？',
				confirmColor: '#FD9B0F',
				success: rs => {
					if (rs.confirm) {
						this.changeMey(0);
					}
				}
			});
		},
		//改变金额，code：1-转入，0-清零
		changeMey(code) {
			let data = {
				cardId: this.info.cardId,
				action: code
			};
			if (code === 1) {
				data.cardMoney = parseFloat(this.cardMoney);
			}
			this.$http({
				url: this.$api.recordUrl + 'distributecardmoney',
				data: data
			}).then(res => {
				this.$successToast('设置成功！');
				let dtBalance = this.dtBalance;
				if (code === 1) {
					//往储值卡转入金额时
					dtBalance = this.$operation(dtBalance, '-', this.cardMoney);
					this.info.cardMoney = this.$operation(this.info.cardMoney, '+', this.cardMoney);
				} else {
					//将储值卡的余额清零时
					dtBalance = this.$operation(dtBalance, '+', this.info.cardMoney);
					this.info.cardMoney = 0;
				}
				this.$store.commit('setDtBalance', dtBalance);
				this.cardMoney = '';
				this.showPopup = false;
				uni.$emit('userAcc_cardChe', this.info);
			});
		},
		//启用/停用
		changeSt(e) {
			let code = e.target.value ? 1 : 2;
			this.checked = e.target.value;
			this.editCode(code);
		},
		//相关操作，code：1-启用，2-停用，3-解锁 4 接触绑定
		editCode(code) {
			let title = '';
			let content = '';
			let data = {
				cardId: this.info.cardId
			};

			switch (code) {
				case 1:
					title = '确定启用此卡吗';
					content = '启用后该卡可以正常使用';
					data.cardStatus = code;
					break;
				case 2:
					title = '确定停用此卡吗';
					content = '停用后该卡将不能正常使用，余额将被冻结';
					data.cardStatus = code;
					break;
				case 3:
					title = '确定解除锁定吗';
					content = '解锁后该卡可以正常使用';
					data.action = 1;
					break;
				case 4:
					title = '确定解除绑定吗';
					content = '解绑后该卡可以再重新绑定';
					data.action = 2;
					break;
			}
			if (code == 4 && this.info.cardMoney) {
				return uni.showModal({
					title: '提示',
					content: '此卡上的余额清空后将退还到原账户，您确定清空余额并删除此卡吗！',
					confirmText: '清空删除',
					confirmColor: '#ffaa00',
					success: res => {
						if (res.confirm) {
							this.clearBalance();
						}
					}
				});
			}
			uni.showModal({
				title: title,
				content: content,
				confirmColor: '#0DC887',
				success: rs => {
					if (rs.confirm) {
						this.$http({
							url: this.$api.recordUrl + 'editcardinfo',
							data: data
						}).then(res => {
							
							//启用或解封
							if (code === 1 || code === 3) {
								this.info.cardStatus = 1;
								this.info.bgClass = 'bg-1';
								this.checked = true;
							}
							//停用
							else {
								this.info.cardStatus = 2;
								this.info.bgClass = 'bg-2';
								this.checked = false;
							}
							if (data.action == 2) {
								// 删除卡
								uni.$emit('userAcc_cardRemove', this.info);
								uni.showModal({
									content:'解绑成功！',
									showCancel:false,
									success: () => {
										uni.navigateBack();
									}
								})
							} else {
								this.$successToast('设置成功！');
								uni.$emit('userAcc_cardChe', this.info);
								uni.navigateBack();
							}
						});
						this.checked = this.info.cardStatus === 1 ? true : false;
					} else if (rs.cancel) {
						this.checked = this.info.cardStatus === 1 ? true : false;
					}
				}
			});
		},
		//提交
		submit() {
			if (!this.info.cardPwd) {
				this.$showToast('请输入卡密码！');
				return;
			} else {
				let str = parseInt(this.info.cardPwd).toString();
				if (str.length !== 6) {
					this.$showToast('请输入6位纯数字密码！');
					return;
				}
			}
			if (!this.info.cardDesc) {
				this.$showToast('请输入备注！');
				return;
			}
			this.submit2();
		},
		submit2() {
			this.$http({
				url: this.$api.recordUrl + 'editcardinfo',
				data: {
					cardId: this.info.cardId,
					cardDesc: this.info.cardDesc,
					cardPwd: this.info.cardPwd
				}
			}).then(res => {
				this.$successToast('保存成功！');
				uni.$emit('userAcc_cardChe', this.info);
			});
		},
		clearBalance() {
			this.$http({
				url: this.$api.recordUrl + 'distributecardmoney',
				data: {
					action: 0,
					cardId: this.info.cardId
				}
			}).then(res => {
				uni.showModal({
					content: '清除成功！',
					showCancel: false,
					success: () => {
						uni.$emit('userAcc_cardRemove', this.info);
						uni.navigateBack();
					}
				});
			});
		}
	}
};
</script>

<style lang="scss">
.gray {
	background-color: #f5f5f9;
}
.info {
	width: 750rpx;
	padding: 0 30rpx;
	margin-top: $spacing-col;
	background-color: $color-white;
}
.item {
	width: 100%;
	height: 100rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	.left {
		flex: 1;
	}
	.int {
		flex: 1;
		text-align: end;
		margin-left: 30rpx;
	}
	.icon-mey {
		font-size: 20rpx;
		color: $color-grey;
		margin-right: 2rpx;
	}
	.icon-mey-2 {
		font-size: 22rpx;
		color: $color-grey;
		margin-right: 2rpx;
		margin-bottom: -5rpx;
	}
	.icon-arr {
		width: 16rpx;
		height: 26rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16DA2OAKDK0AAACgamhxB0101.png');
	}
	.tip {
		font-size: 24rpx;
		color: $color-grey;
		margin-top: 22rpx;
	}
	.num {
		font-family: $font-family-num;
		text-align: end;
	}
	.btn {
		margin-top: 20rpx;
	}
	.btn-1 {
		color: $color-text-primary;
	}
	.btn-2 {
		color: #ff3d3d;
		margin-left: 66rpx;
	}
}
.item.l1 {
	color: $color-grey;
}
.item.l2 {
	height: 170rpx;
}
.item.bl {
	border-bottom: 1rpx solid $color-list;
}
.btn-view {
	width: 750rpx;
	// height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	font-size: 30rpx;
	color: $color-text-primary;

	> view:first-child {
		margin-bottom: 34rpx;
		background-color: $color-white;
		color: #0dc887;
	}

	> view:nth-child(2) {
		background-color: $color-white;
		color: #999999;
	}
}
.btn-view.btm {
	position: fixed;
	left: 0;
	bottom: 0;
}
.btn-view.com {
	margin-top: 45rpx;
	background-color: #ffffff;
}

/* 弹窗 */
._popup .cont {
	width: 600rpx;
	background-color: $color-white;
	border-radius: $border-radius-bm;
	.top {
		width: 100%;
		padding: 60rpx;
		.input {
			width: 100%;
			padding: 20rpx 30rpx;
			background-color: $color-bg;
			border-radius: $border-radius-sm;
			.int {
				width: 100%;
				text-align: center;
			}
		}
	}
}
</style>
